<template>
  <BaseTable
    ref="baseTableRef"
    :apiUrl="getStorageList"
    :rowId="id"
    :isShowAddBtn="false"
    placeholder="请输入名称"
    :columns="columns"
    :height="height"
  >
    <!-- <template #enabled="{ record }">
      <ga-switch
        :checked-value="1"
        :unchecked-value="0"
        size="mini"
        v-model="record.enabled"
        @change="handleEnabledChange(record)"
      />
    </template> -->
    <template #storageType="{ record }">
      <ga-tag color="blue">{{
        storageTagType[record?.storageType?.dictValue] || "-"
      }}</ga-tag>
    </template>
    <template #action="{ record }">
      <ga-link @click="$refs.addOrEditRef.open(record)">编辑</ga-link>
      <ga-link @click="$refs.editTagRef.open(record)">标签</ga-link>
    </template>
  </BaseTable>
  <addOrEdit ref="addOrEditRef" @fetchData="$refs.baseTableRef.fetchData()" />
  <editTag ref="editTagRef" @fetchData="$refs.baseTableRef.fetchData()" />
</template>

<script setup>
import { ref, h } from "vue";
import { render } from "@/utils";
import usageRate from "common/usageRate.vue";
import { storageTagType } from "@/constant";
import { getStorageList } from "@/api/storage";
import addOrEdit from "./addOrEdit.vue";
import editTag from "./editTag.vue";

defineProps({
  id: {
    type: Number,
    default: "",
  },
  height: {
    type: String,
    default: "calc(100vh - 236px)",
  },
});
const columns = [
  {
    title: "名称",
    dataIndex: "name",
    tooltip: true,
    ellipsis: true,
    fixed: "left",
    render,
  },
  {
    title: "存储类型",
    dataIndex: "type",
    tooltip: true,
    ellipsis: true,
    render,
  },
  {
    title: "是否启用",
    dataIndex: "enable",
    width: 200,
    render: ({ record }) => (record.enable ? "是" : "否"),
  },
  {
    title: "标签",
    slotName: "storageType",
    tooltip: true,
    ellipsis: true,
  },
  {
    title: "存储协议",
    dataIndex: "protocol",
    tooltip: true,
    ellipsis: true,
    render,
  },
  {
    title: "存储使用率",
    dataIndex: "storage",
    tooltip: true,
    ellipsis: true,
    width: 200,
    render: ({ record }) => h(usageRate, { total: record?.capacity, used: record?.used }),
  },
  {
    title: "操作",
    width: 110,
    dataIndex: "action",
    slotName: "action",
  },
];
</script>

<style lang="scss" scoped></style>
